<template>
	<!-- 关于我们 -->
	<view :class="model+'-wrap'">
		<view :class="'p-sticky-'+model" :style="model=='light'?'background:#fff;':''">
			<view class="status_bar">

			</view>
			<view class="nav_bar flex align-center justify-between">
				<view @click="$tool.goBack()" class="f0 p-3">
					<image class="fanhui_icon" :src="'/static/images/fanhui_'+model+'.png'" mode=""></image>
				</view>
				<view class="A-Medium" :class="'navTitle_'+model">
					{{i18n.m011}}
				</view>
				<view class="f0 p-3 opacity0">
					<image class="fanhui_icon" :src="'/static/images/fanhui_'+model+'.png'" mode=""></image>
				</view>
			</view>
		</view>
		<view class="flex f0 justify-center" style="margin-top: 128rpx;">
			<!-- <image style="width: 168rpx;height: 168rpx;" src="/static/images/cat.png" mode=""></image> -->
			<image style="width: 168rpx;height: 168rpx;" :src="'/static/images/defalutAvatar_'+model+'.png'" mode=""></image>
		</view>
		<view class="title2 A-Medium text-alignC" :class="model=='light'?'title2Light':''">
			Luck Cat
		</view>
		<!-- <view class="version mt-1 A-Medium text-alignC">
			v{{verNum}}
		</view> -->
		<view class="mx-3 mt-8 menuList A-Medium" :class="model=='light'?'menuListLight':''">
			<view @click="goUrl(item)" v-for="(item,index) in list" class="list py-3 flex align-center mx-3" :class="model=='light'?'listLight':''" :style="(index==(list.length-1))?'border:none;':''">
				<view class="flex align-center">
					<view class="f0">
						<!-- <image class="icon1" :src="'/static/images/aboutUs/1_'+model+'.png'" mode=""></image> -->
						<image class="icon1" :src="$tool.changeImg(item.linkIcon)" mode=""></image>
					</view>
					<view class="title" :class="model=='light'?'titleLight':''">
						{{item.linkName}}
					</view>
				</view>
				<view class="content flex-1">
					{{item.linkAddress}}
				</view>
				<view class="f0">
					<image class="icon2" :src="'/static/images/rightArrow_'+model+'.png'" mode=""></image>
				</view>
			</view>
			<!-- <view class="list py-3 flex align-center mx-3" :class="model=='light'?'listLight':''">
				<view class="flex align-center">
					<view class="f0">
						<image class="icon1" :src="'/static/images/aboutUs/2_'+model+'.png'" mode=""></image>
					</view>
					<view class="title" :class="model=='light'?'titleLight':''">
						Youtube
					</view>
				</view>
				<view class="content flex-1">
					https://twitter.com/HKD_exchange
				</view>
				<view class="f0">
					<image class="icon2" :src="'/static/images/rightArrow_'+model+'.png'" mode=""></image>
				</view>
			</view>
			<view class="list py-3 flex align-center mx-3" style="border: none;" :class="model=='light'?'listLight':''">
				<view class="flex align-center">
					<view class="f0">
						<image class="icon1" :src="'/static/images/aboutUs/3_'+model+'.png'" mode=""></image>
					</view>
					<view class="title" :class="model=='light'?'titleLight':''">
						Youtube
					</view>
				</view>
				<view class="content flex-1">
					https://twitter.com/HKD_exchange
				</view>
				<view class="f0">
					<image class="icon2" :src="'/static/images/rightArrow_'+model+'.png'" mode=""></image>
				</view>
			</view> -->
		</view>
		<view class="A-Regular" style="position: fixed;bottom: 78rpx;font-size: 28rpx;color: #5951BA;width: 750rpx;">
			<view class="flex align-center justify-between" style="margin: 0 72rpx;margin-bottom: 32rpx;">
				<view @click="$tool.navTo('/pages/fwb/fwb?type=3')" class="">
					《{{i18n.m127}}》
				</view>
				<view @click="$tool.navTo('/pages/fwb/fwb?type=4')" class="">
					《{{i18n.m128}}》
				</view>
			</view>
			<view class="flex align-center justify-between" style="margin: 0 72rpx;">
				<view @click="$tool.navTo('/pages/fwb/fwb?type=5')" class="">
					《{{i18n.m129}}》
				</view>
				<view @click="$tool.navTo('/pages/fwb/fwb?type=6')" class="">
					《{{i18n.m130}}》
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		externalLinkList
	} from '@/core/api/index.js';
	export default {
		data() {
			return {
				list:[],
				verNum:"",
			}
		},
		onLoad() {
			this.verNum = uni.getSystemInfoSync().appWgtVersion
			externalLinkList().then(res=>{
				console.log(res,'cs-----------------');
				for(let i=0;i<res.result.records.length;i++){
					this.list.push(res.result.records[i])
				}
			})
		},
		onReady() {
			this.$tool.setStatusBarStyle(this.model);
		},
		onShow() {
			this.$tool.setStatusBarStyle(this.model);
			const pages = getCurrentPages();
			const page = pages[pages.length - 1];
			const currentWebview = page.$getAppWebview();
			if(this.model == "dark"){
				currentWebview.setStyle({
					background: "#0E0F11"
				});
			}else{
				currentWebview.setStyle({
					background: "#ffffff"
				});
			}
		},
		computed: {
			i18n() {
				return this.$t('mine');
			},
			model() {
				return this.$store.state.config.model;
				// return 'dark';
			},
		},
		methods: {
			goUrl(item){
				plus.runtime.openURL(item.linkAddress);
			}
		}
	}
</script>

<style scoped lang="scss">
	.version {
		font-size: 24rpx;
		color: #AAACB8;
	}
	.title2 {
		font-size: 36rpx;
		color: #F7F7F7;
		margin-top: 24rpx;
	}
	.title2Light {
		color: #0E0F11;
	}
	.menuList {
		background: #16181C;
		border-radius: 30rpx;
		border: 2rpx solid #1F2128;
		overflow: hidden;
	
		.list {
			border-bottom: 2rpx solid #1F2128;
	
			.icon1 {
				width: 32rpx;
				height: 32rpx;
				margin-right: 8rpx;
			}
	
			.title {
				font-size: 28rpx;
				color: #F7F7F7;
			}
	
			.titleLight {
				color: #0E0F11;
			}
	
			.content {
				font-size: 20rpx;
				color: #5951BA;
				text-align: right;
			}
	
			.icon2 {
				width: 44rpx;
				height: 44rpx;
			}
		}
	
		.listLight {
			border-bottom: 2rpx solid #F4F4F4;
		}
	}
	
	.menuListLight {
		background: #ffffff;
		border: 2rpx solid #F4F4F4;
	}
</style>